import { useAuth } from "context/auth-context"
import React from "react"
import { ProjectListView } from "views/project-list"
import styled from '@emotion/styled'
import { Dropdown, Menu, Button } from "antd"
import { Row } from "components/lib"
import { ReactComponent as SoftwareLogo } from 'assests/software-logo.svg'
import { Route, Routes } from 'react-router'
import { ProjecView } from "views/project"
import { resetRoute } from "views/utils"


export const AuthenticatedApp = () => {


    return (
        <Container>
            <PageHeader />
            <Main>
                <Routes>
                    <Route path={'/projects/'} element={<ProjectListView />}></Route>
                    <Route path={'/projects/:projectId/*'} element={<ProjecView />}></Route>
                    <Route index element={<ProjectListView/>}></Route>
                </Routes>
            </Main>
        </Container>
    )
}

const PageHeader = () => {

    return <Header between={true}>
        <HeaderLeft gap={true}>
            <Button type="link" onClick={resetRoute}>
                <SoftwareLogo width={'18rem'} color="rgba(38,132,255)" />
            </Button>
        </HeaderLeft>
        <HeaderRight>
            <User />
        </HeaderRight>
    </Header>
}

const User = () => {
    const { logout, user } = useAuth()
    return (
        <Dropdown overlay={
            <Menu>
                <Menu.Item key={'logout'}>
                    <Button onClick={logout} type={'link'}>
                        登出
                    </Button>
                </Menu.Item>
            </Menu>
        }>
            <Button type={'link'} onClick={(e) => e.preventDefault()}>
                Hi,{user?.name}
            </Button>
        </Dropdown>
    )
}

const Container = styled.div`
    display:gird;
    grid-template-rows: 6rem calc(100vh -6rem);
`
const Header = styled(Row)`
    padding: 3.2rem;
    height: 6rem;
    box-shadow:0 0 5px 0 rgba(0,0,0,0.1)
`

const HeaderLeft = styled(Row)``
const HeaderRight = styled.div``

const Main = styled.main`
    height: calc(100vh - 6rem);
`